<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>资源加载时间</title>
	</head>
	<link rel="stylesheet" href="./index.css" />
	<body>
		<img src="./logo2020.png" />

		<script src="./index.js"></script>

		<div>
			资源加载时间：
			<div id="result"></div>
		</div>

		<script>
			// https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceEntry

			function getPerformanceEntries() {
				const p = performance.getEntries();
				for (let i = 0; i < p.length; i++) {
					console.log(p[i]);
					printPerformanceEntry(p[i]);
				}
			}
			function printPerformanceEntry(perfEntry) {
				const properties = ["name", "entryType", "startTime", "duration"];
				if (perfEntry.entryType === "navigation") {
					result.innerHTML += `
          <div>页面资源:${perfEntry.name}</div>
          <div>加载时间:${perfEntry.responseEnd - perfEntry.startTime}</div><hr>
        `;
				} else if (perfEntry.entryType == "resource") {
					result.innerHTML += `
          <div>其他资源:${perfEntry.name}</div>
          <div>加载时间:${perfEntry.duration}</div>
          <hr>
        `;
				}
			}

			getPerformanceEntries();
		</script>
	</body>
</html>
